<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>登录</title>
    <link rel="stylesheet" href="css/layout.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="elementUI/index.css">
    <script src="js/js-cookie.js"></script>
    <script src="./login.js"></script>
    <script src="js/vue.js"></script>
    <script src="elementUI/index.js"></script>
</head>
<body>
<div id="app" class="row-all-center">
    <div style="background: white;padding: 20px">
        <div class="row-all-center">
            <p style="color: #0084FF;font-size: 34px;">老师，您好</p>
        </div>
        <div class="row-all-center" style="padding: 20px">
            <p style="color: #0084FF;font-size: 20px;">请您登录，进入秦开远的作业</p>
        </div>
        <el-form ref="login" :model="login" :rules="rules" label-width="80px">
            <el-form-item label="用户名：" prop="username">
                <el-input v-model="login.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
                <el-input type="password" v-model="login.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-button type="primary" size="small" @click="loginIn('login')" style="width: 260px;margin-left: 20px">登录
            </el-button>
        </el-form>
    </div>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      login: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
      }
    },
    methods: {
      loginIn(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //因直接使用直接打开文件方式无法使用 cookie
            if (this.login.username === Cookies.get('username')
              && this.login.password === Cookies.get('password')||
              this.login.username === 'admin'
              && this.login.password === 'admin123'
            ) {
              window.location.href = "./home.html";
            } else {
              this.$alert('账号密码错误，请重新输入')
            }
          }
        })
      }
    }
  })
</script>
<style>
    body {
        background-image: url("img/background.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .el-input {
        width: 200px;
    }
</style>
</body>
</html>